<template>
	<!-- 我的足迹 -->
	<scroll-view scroll-y class="scrollSty" @scrolltolower="scrolltolowerFnc">
		<view class="haveBought-main">
			<view v-if="historyList">
				<view v-for="(item, index) in historyList" style="margin-bottom: 20rpx">
					<view class="haveBought-header">
						{{ index }}
					</view>
					<view class="haveBought-list">
						<view class="haveBought-item" v-for="(jitem, jindex) in item" :key="jitem.id" @click="gotoShopInfo(jitem.goods_id)">
							<image :src="imageUrls(jitem.goods.fileUrl)" mode="widthFix" class="images"></image>
							<text class="title">
								{{ jitem.goods.name }}
							</text>
						</view>
					</view>
				</view>
			</view>

			<view v-else style="margin-bottom: 40rpx">
				<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png"></u-empty>
			</view>

			<view class="shoppingCart-hotShop">
				<view class="hotShop-title">热销产品</view>
				<view class="hotShop">
					<hwxcShopItem :shopList="shopListData" shopType="0" />
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
import { userHistory, homeGoodsList } from '../../api/home/index.js';
import { imageUrl } from '../../utils/tools.js';
export default {
	data() {
		return {
			historyList: null,
			shopListData: [],
			// 商品参数
			shopQuery: {
				page: 1,
				limit: 10,
				category_id: '',
				type: '0',
				store_id:'0'
			}
		};
	},
	async onLoad() {
		await this.getuserHistory();
		await this.getHomeGoodsList();
	},
	methods: {
		imageUrls(fileUrl) {
			return imageUrl(fileUrl);
		},

		gotoShopInfo(id, type) {
			uni.navigateTo({
				url: `/pages/shoppingInfo/shoppingInfo?id=${id}`
			});
		},

		// 足迹信息
		async getuserHistory() {
			try {
				const resData = await userHistory();
				const historyList = resData.data;
				const listData = {};

				for (let key in historyList) {
					if (historyList[key].length > 0) {
						listData[key] = historyList[key].reduce((acc, cur) => {
							acc[cur.goods_id] = cur;
							return acc;
						}, {});
					}
				}
				this.historyList = listData;
			} catch (e) {
				throw Error(e);
			}
		},

		// 获取商品数据
		async getHomeGoodsList() {
			try {
				const resData = await homeGoodsList(this.shopQuery);
				let list = resData.data.data || [];
				this.shopListData = [...(this.shopListData || []), ...list];
			} catch (e) {
				throw Error(e);
			}
		},

		// 触底加载
		scrolltolowerFnc() {
			this.shopQuery.page++;
			this.getHomeGoodsList();
		}
	}
};
</script>

<style scoped lang="scss">
.scrollSty {
	height: calc(100vh - 50rpx);
}
.haveBought-main {
	box-sizing: border-box;
	padding: 20rpx;
	.haveBought-header {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		background-color: #fff;
		border-bottom: 1px #f3f3f3 solid;
		box-sizing: border-box;
		padding: 0px 20rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
	.haveBought-list {
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		.haveBought-item {
			width: 30%;
			display: flex;
			align-items: center;
			flex-direction: column;
			.images {
				width: 190rpx;
				height: 190rpx;
				border-radius: 10rpx;
			}
			.title {
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
	}

	.shoppingCart-hotShop {
		.hotShop-title {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 28rpx;
			color: #999;
		}
	}
}
</style>
